<template>
  <div>
    <el-header>
      <el-row class="nav" type="flex" align="middle">
        <el-col :span="4" class="box"
          ><img class="image" src="../assets/logo.png" @click="toHome()"
        /></el-col>
        <el-col :span="10">
          <el-menu
            :default-active="$route.path"
            class="el-menu-demo"
            mode="horizontal"
            active-text-color="#4F6E9D"
          >
            <el-menu-item index="/">
            <router-link to="/index">首页</router-link>
            </el-menu-item>
            <el-menu-item v-for="(item,i) in categorys" :key="i"   :index="item">
                <router-link :to="{name:'BooksList',params:{category:item}}">{{item}}</router-link>
            </el-menu-item>
            <el-menu-item index="all">
                <router-link :to="{name:'BooksList',params:{category:'all'}}">全部书籍</router-link>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="4" class="box">
          <el-input
            class="myInput1 myInput2"
            placeholder="搜索书籍"
            active-text-color="#4F6E9D"
            size="small"
            prefix-icon="el-icon-search"
            v-model="input"
            @focus="InputFocus"
            @blur="InputBlur"
            @confirm="toSearch()"
          >
          </el-input>
        </el-col>

        <el-col :span="1" :offset="2" class="box">
          <div
            v-if="
              this.$cookies.get('status') == 'unlogin' ||
              !this.$cookies.get('status')
            "
          >
            <el-button
              class="myButton el-icon-user"
              @click="toLogin()"
              circle
            ></el-button>
          </div>

          <div v-if="this.$cookies.get('status') == 'logined'">
            <el-dropdown>
              <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-setting"
                  ><label @click="setting()">个人中心</label></el-dropdown-item
                >
                <el-dropdown-item icon="el-icon-circle-close"
                  ><label @click="exit()">退出登录</label></el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>

        <el-col :span="3">
          <!-- <div>{{this.ID}}</div> -->
          <el-menu
            :default-active="$route.path"
            router
            class="el-menu-demo"
            mode="horizontal"
            active-text-color="#4F6E9D"
          >
            <el-menu-item index="/cart">购物车</el-menu-item>
            <el-menu-item index="/order">订单</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </el-header>

    <el-main>
        <router-view></router-view>
      <!-- <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view> -->
    </el-main>

    <div
      class="footer"
      v-show="$route.name !== 'login' && $route.name !== 'register'"
    >
      <el-row class="border" type="flex">
        <el-col :span="24">
          <div class="contact">© 联系方式：smallFrogBookstore@163.com</div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import myapi from "../api";
export default {
  data() {
    return {
      categorys: [],
      input: "",
      isRouter: true,
    };
  },
  mounted() {
    axios.get(myapi.category.url).then((response) => {
      //用户名和密码将转为json传到后台接口
      let res = response.data; //用res承接返回后台的json文件(像使用数组那样)
      console.log(res.data);
      if (res.code == 10) {
        //显示登录结果
        this.categorys = res.data;
      } else {
        console.log("获取失败");
      }
    });
  },
  methods:{
      toBooksListPage(c){
        this.$router.push({
            name:'BooksList',
            params:{category:c}
            });
      },
    InputFocus() {},
    InputBlur() {},
    toSearch() {},
    toLogin() {
      this.$router.push({
        path: "/login",
      });
    },
    toHome() {
      this.$router.push({
        path: "/",
      });
    },
    setting() {
      this.$router.push({
        path: "/setting",
      });
    },
    exit() {
      this.$cookies.set("status", "unlogin");
      location.reload();
    },
  },
};
</script>

<style>
.nav {
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: fixed;
  z-index: 999;
}

.el-menu.el-menu--horizontal {
  border-bottom: none;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  color: #4f6e9d;
}

.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  color: #4f6e9d;
}

.box {
  background-color: #ffffff;
  text-align: center;
  color: #4f6e9d;
  font-size: 20px;
  cursor: pointer;
}

.el-menu-demo {
  margin-left: 30px;
}

.image {
  margin-left: 20px;
  width: 200px;
}

.el-icon-user {
  float: right;
}

/* 自定义类+内置类 */
.myInput1 input.el-input__inner:focus {
  border-color: #4f6e9d;
}

.myInput2 input.el-input__inner {
  border-radius: 25px;
}

.myButton:focus,
.myButton:hover {
  color: #ffffff;
  border-color: #7e9dca;
  background-color: #7e9dca;
}

.myButton:active {
  color: #ffffff;
  border-color: #7e9dca;
  outline: 0;
}

.el-avatar {
  cursor: pointer;
}

.footer {
  background-color: #4f6e9d;
}

.border {
  line-height: 100px;
  margin: 0 auto;
}

.contact {
  color: #ffffff;
  margin-left: 30px;
  text-align: center;
}
</style>